<template>
  <div class="container">
    <div class="main-content">
      <nav class="category-nav">
        <ul class="category-list">
          <li v-for="category in categories" :key="category.id" class="category-item">
            <a href="#" class="category-link">{{ category.name }}</a>
            <div class="subcategory-wrapper">
              <div class="subcategory-list">
                <div v-for="subCategory in category.children" :key="subCategory.id"
                     class="subcategory-item"
                     @mouseenter="currentSubCategory = subCategory.id"
                     @mouseleave="currentSubCategory = null">
                  <a href="#" class="subcategory-link"
                     @click.prevent="handleCategoryClick(subCategory)">{{ subCategory.name }}</a>
                  <div class="third-category-wrapper" v-show="currentSubCategory === subCategory.id">
                    <div class="third-category-list">
                      <a v-for="thirdCategory in subCategory.children"
                         :key="thirdCategory.id"
                         href="#"
                         class="third-category-link"
                         @click.prevent="handleCategoryClick(thirdCategory)"
                      >

                        {{ thirdCategory.name }}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </nav>

      <div class="carousel">
        <div
            v-for="(slide, index) in slides"
            :key="slide.id"
            :class="['carousel-item', { active: currentSlide === index }]"
            @click="handleSlideClick(slide)"
        >
          <img :src="slide.image" :alt="slide.title">
        </div>
        <button class="carousel-arrow left" @click="changeSlide(-1)">&lt;</button>
        <button class="carousel-arrow right" @click="changeSlide(1)">&gt;</button>
      </div>
    </div>

    <div class="course-recommend">
      <div class="recommend-item" v-for="(item, index) in recommendItems" :key="index">
        <img :src="item.image" :alt="item.title">
        <div class="item-content">
          <h4>{{ item.title }}</h4>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </div>

    <div class="course-category-nav">
      <a href="#" class="hot">Hot 热</a>
      <a
          v-for="(nav, index) in categoryNavs"
          :key="index"
          :class="{ active: nav === activeNav }"
          @click.prevent="activeNav = nav">
        {{ nav }}
      </a>
    </div>

    <div class="new-courses">
      <div class="course-card" v-for="(course, index) in newCourses" :key="index">
        <div class="course-img">
          <img :src="course.image" :alt="course.title">
          <div class="new-label" v-if="course.isNew">新课</div>
        </div>
        <h3>{{ course.title }}</h3>
        <p class="course-desc">{{ course.description }}</p>
        <p class="course-meta">{{ course.level }} · {{ course.studentCount }}人报名</p>
        <p class="course-price">
          <span>
            <span class="discount-label" v-if="course.discount">限时优惠</span>
            ¥{{ course.price }}
            <del v-if="course.originalPrice">¥{{ course.originalPrice }}</del>
          </span>
        </p>
      </div>
    </div>

    <div class="course-category-nav advanced">
      <a href="#" class="hot">进阶必学</a>
      <a
          v-for="(nav, index) in advancedNavs"
          :key="index"
          :class="{ active: nav === activeAdvancedNav }"
          @click.prevent="activeAdvancedNav = nav">
        {{ nav }}
      </a>
    </div>

    <div class="must-learn-courses">
      <div class="course-card" v-for="(course, index) in advancedCourses" :key="index">
        <div class="course-img">
          <img :src="course.image" :alt="course.title">
          <div class="upgrade-label" v-if="course.isUpgrade">升级</div>
        </div>
        <h3>{{ course.title }}</h3>
        <p class="course-desc">{{ course.description }}</p>
        <p class="course-meta">{{ course.level }} · {{ course.studentCount }}人报名</p>
        <p class="course-price">
          <span>¥{{ course.price }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'

import axios from 'axios'

// 当前轮播图索引
const currentSlide = ref(0)

// 当前选中的二级分类ID
const currentSubCategory = ref(null)

// 在 script setup 部分添加基础URL常量
const BASE_URL = 'http://127.0.0.1:8000'

// 轮播图静态数据
const slides = ref([])

// 处理轮播图点击
const handleSlideClick = (slide) => {
  if (slide.link) {
    window.open(slide.link, '_blank')
  }
}


const handleCategoryClick = (thirdCategory) => {
  console.log("==========")
  console.log(thirdCategory)
  //跳转
  router.push({
    path: "/courses",
    query: {
      categoryId: thirdCategory.id
    }
  })

}

// 轮播图切换方法
const changeSlide = (direction) => {
  currentSlide.value = (currentSlide.value + direction + slides.value.length) % slides.value.length
}

// 自动播放功能
const autoPlay = () => {
  setInterval(() => {
    changeSlide(1)
  }, 3000)
}

// 在组件挂载时开始自动播放
onMounted(() => {
  autoPlay()
})

// 左侧导航数据
const categories = ref([])

// 推荐课程数据
const recommendItems = [
  {
    image: 'https://www.usian.cn/uploads/20250328/4427922f1c9160811fa15e8fcd4c42f0.png',
    title: 'Java工程师',
    description: '综合就业率第一'
  },
  {
    image: 'https://www.usian.cn/uploads/20250328/d6638c15f78a9cf8b1ac2358fc0ffa5f.png',
    title: '前端工程师',
    description: '入门快、就业快、岗位多'
  },
  {
    image: 'https://www.usian.cn/uploads/20250328/7dcbd986344574cd7f045f162a0fd26f.png',
    title: 'Python工程师',
    description: '应用领域最广泛'
  },
  {
    image: 'https://www.usian.cn/uploads/20250328/a8fe9f651fb9fd21c253caff735b40df.png',
    title: 'Web前端架构师',
    description: '培养前端P7级架构师'
  },
  {
    image: 'https://www.itheima.com/images/teacher/cloud/20210126144435%E5%AD%94%E8%80%81%E5%B8%88_%E8%AF%BE%E7%A0%94.jpg',
    title: 'Java架构师P7',
    description: '千万级电商架构0-100'
  }
]

// 课程分类导航
const categoryNavs = ['新上好课', '推荐', '前端开发', '后端开发', '精品免费']
const advancedNavs = ['TOP', '推荐', '前端开发', '后端开发', '精品免费']

// 新上好课数据
const newCourses = [
  {
    isNew: true,
    image: 'https://www.usian.cn/uploads/20250327/7a2fb7e5e8d8645bff3cf915efea2b0e.png',
    title: 'uni-app 开发企业级小程序',
    description: 'uni-app开发企业级小程序 为小程序0基础学员而设，让你拥有能上线的作品',
    level: '初级',
    studentCount: 6,
    price: '298.00',
    originalPrice: '348.00',
    discount: true
  },
  {
    isNew: true,
    image: 'https://www.usian.cn/uploads/20250327/052111edb1cc05f9fd4ecebfe45264ec.png',
    title: '从零编写微前端框架',
    description: '从0打造微前端框架 实战汽车资讯平台系统掌握微前端架构设计与落地能力',
    level: '高级',
    studentCount: 71,
    price: '328.00',
    originalPrice: '368.00',
    discount: true
  },
  {
    isNew: true,
    image: 'https://www.usian.cn/uploads/20250328/4427922f1c9160811fa15e8fcd4c42f0.png',
    title: 'Vue3+TypeScript 高级教程',
    description: '深入学习Vue3+TypeScript，掌握企业级项目开发技能',
    level: '中级',
    studentCount: 128,
    price: '358.00',
    originalPrice: '398.00',
    discount: true
  },
  {
    isNew: true,
    image: 'https://www.usian.cn/uploads/20250328/7dcbd986344574cd7f045f162a0fd26f.png',
    title: 'Python全栈开发实战',
    description: 'Python从入门到精通，全栈开发技能完整培训课程',
    level: '初级',
    studentCount: 256,
    price: '399.00',
    originalPrice: '459.00',
    discount: true
  }
]

// 进阶必学课程数据
const advancedCourses = [
  {
    image: 'https://www.usian.cn/uploads/20250327/7a2fb7e5e8d8645bff3cf915efea2b0e.png',
    title: '前端框架及项目面试',
    description: '前端框架及项目面试 聚焦Vue3/React/Webpack',
    level: '中级',
    studentCount: 2909,
    price: '399.00',
    isUpgrade: true
  },
  {
    image: 'https://www.usian.cn/uploads/20250328/d6638c15f78a9cf8b1ac2358fc0ffa5f.png',
    title: '全面系统学测试 从小白到就业',
    description: '从零开始学测试 一步迈进互联网',
    level: '初级',
    studentCount: 1238,
    price: '388.00',
    isUpgrade: true
  },
  {
    image: 'https://www.usian.cn/uploads/20250328/7dcbd986344574cd7f045f162a0fd26f.png',
    title: 'Java高级开发工程师',
    description: 'Spring Cloud微服务架构设计与实现',
    level: '高级',
    studentCount: 1856,
    price: '499.00',
    isUpgrade: true
  },
  {
    image: 'https://www.usian.cn/uploads/20250328/4427922f1c9160811fa15e8fcd4c42f0.png',
    title: 'Python数据分析与爬虫',
    description: '深度学习Python数据分析与爬虫技术',
    level: '中级',
    studentCount: 2156,
    price: '459.00',
    isUpgrade: true
  }
]

// 在script setup部分添加
const activeNav = ref('推荐')
const activeAdvancedNav = ref('推荐')

const router = useRouter()

const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}

// 在script setup部分添加
const navLinks = ref([
  {name: '免费课', path: '/courses', query: {type: 'free'}},
  {name: '实战课', path: '/courses', query: {type: 'practical'}},
  {name: '体系课', path: '/courses', query: {type: 'system'}}
])

const goToCart = () => {
  router.push('/cart')
}

const goToLearningCenter = () => {
  router.push('/user')
}

// 添加导航数据的响应式变量
const navCategories = ref([])


// 处理导航链接点击
const handleNavClick = (category) => {
  if (category.external_link) {
    window.open(category.external_link, '_blank')
  }
}


const fetchCourseCategories = () => {

  axios.get('http://127.0.0.1:8000/home/course/categories/').then(res => {
    console.log("fetchCourseCategories")
    console.log(res)
    if (res.data.code == 1) {
      categories.value = res.data.data
    }

  })

}


const fetchBanner = () => {
  axios.get("http://127.0.0.1:8000/home/banners/").then(res => {
    console.log(("fetchBanner"))
    console.log(res)
    slides.value = res.data.data
  })
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchCourseCategories()
  fetchBanner()
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  margin-right: 8px;
}

.logo span {
  font-size: 14px;
  color: #666666;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-links a:hover {
  opacity: 0.8;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #ff6b00;
  transition: all 0.3s;
  transform: translateX(-50%);
}

.nav-links a:hover::after {
  width: 100%;
}

.search-container {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 24px;
  overflow: hidden;
}

.search-container input {
  border: none;
  padding: 10px 18px;
  outline: none;
  width: 300px;
  font-size: 14px;
  background: transparent;
}

.search-container button {
  border: none;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}

.user-action {
  display: flex;
  align-items: center;
  gap: 24px;
}

.action-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  transition: all 0.3s;
}

.icon-btn:hover {
  color: #ff6b00;
}

.icon-btn i {
  font-size: 16px;
}

.auth-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-btn, .register-btn {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.login-btn {
  background: transparent;
  color: #666;
}

.login-btn:hover {
  color: #ff6b00;
}

.register-btn {
  background: #ff6b00;
  color: white;
}

.register-btn:hover {
  background: #ff8533;
}

.main-content {
  display: flex;
  max-width: 1200px;
  margin: 80px auto 20px;
  gap: 20px;
  padding: 0 20px;
}

.category-nav {
  width: 260px;
  background: linear-gradient(to bottom, #2c3e50, #34495e);
  border-radius: 8px;
  height: 450px;
  position: relative;
  z-index: 100;
}

.category-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-item {
  position: relative;
}

.category-link {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s;
}

.category-item:hover .category-link {
  background: rgba(255, 255, 255, 0.1);
  color: #3498db;
}

.category-item:hover .subcategory-wrapper {
  display: block;
}

.subcategory-wrapper {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: #34495e;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.subcategory-list {
  padding: 10px 0;
}

.subcategory-item {
  position: relative;
}

.subcategory-link {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
  white-space: nowrap;
}

.subcategory-item:hover .subcategory-link {
  background: rgba(255, 255, 255, 0.1);
  color: #3498db;
}

.third-category-wrapper {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: #34495e;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 101;
}

.third-category-list {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.third-category-link {
  display: block;
  padding: 8px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s;
  white-space: nowrap;
}

.third-category-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #3498db;
}

.carousel {
  flex: 1;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 450px;
  z-index: 1;
}

.carousel-item {
  display: none;
  position: relative;
  height: 100%;
}

.carousel-item.active {
  display: block;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}

.carousel-arrow.left {
  left: 20px;
}

.carousel-arrow.right {
  right: 20px;
}

.course-recommend {
  display: flex;
  justify-content: space-between;
  padding: 40px 20px;
  background: #f8f9fa;
  margin: 20px auto;
  max-width: 1200px;
}

.recommend-item {
  text-align: center;
  flex: 1;
  padding: 0 15px;
}

.recommend-item img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.recommend-item:hover img {
  transform: scale(1.05);
}

.item-content h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.item-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.course-category-nav {
  max-width: 1200px;
  margin: 20px auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  background: #f6f7fb;
  border-radius: 4px;
}

.course-category-nav a {
  padding: 6px 16px;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  position: relative;
  transition: color 0.3s;
  margin-right: 10px;
}

.course-category-nav a:hover {
  color: #ff6b00;
}

.course-category-nav a.hot {
  background: #ff6b00;
  color: white;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: 500;
}

.course-category-nav a.active {
  color: #ff6b00;
  font-weight: 500;
}

.course-category-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: #ff6b00;
  border-radius: 1px;
}

.new-courses,
.must-learn-courses {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.course-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.course-img {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.course-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.course-card:hover .course-img img {
  transform: scale(1.05);
}

.new-label,
.upgrade-label {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 2px;
  background: #007bff;
  color: white;
}

.course-card h3 {
  margin: 15px;
  font-size: 16px;
  color: #333;
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-desc {
  margin: 15px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-meta {
  margin: 15px;
  font-size: 12px;
  color: #999;
}

.course-price {
  margin: 15px;
  color: #ff4d4f;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.discount-label {
  color: #ff4d4f;
  font-size: 12px;
  background: rgba(255, 77, 79, 0.1);
  padding: 2px 6px;
  border-radius: 2px;
}

.course-price del {
  color: #999;
  margin-left: 5px;
  font-weight: normal;
  font-size: 12px;
}

footer {
  background: #f8f9fa;
  padding: 20px;
  text-align: center;
  margin-top: 40px;
}

.footer-links {
  margin-bottom: 20px;
}

.footer-links a {
  margin: 0 10px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.footer-bottom {
  color: #999;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.social-icons {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.social-icons img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.course-category-nav.advanced {
  background: transparent;
  border-bottom: 1px solid #eee;
  border-radius: 0;
  padding: 0 20px 10px;
}

.course-category-nav.advanced a {
  padding: 8px 0;
  margin-right: 32px;
  font-size: 16px;
  color: #333;
}

.course-category-nav.advanced a:hover {
  color: #ff6b00;
}

.course-category-nav.advanced a.hot {
  background: transparent;
  color: #ff6b00;
  padding: 8px 0;
  font-weight: bold;
  position: relative;
  display: flex;
  align-items: center;
}

.course-category-nav.advanced a.hot::before {
  content: 'Top';
  font-size: 12px;
  color: #ff6b00;
  background: rgba(255, 107, 0, 0.1);
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 4px;
}

.course-category-nav.advanced a.active {
  color: #ff6b00;
  font-weight: bold;
}

.course-category-nav.advanced a.active::after {
  width: 100%;
  transform: none;
  left: 0;
  height: 3px;
  bottom: -11px;
}
</style>